<template>
	<view class="conent">
		<view class="conent_box">
			<u-list v-if="messageList.length>0">
				<u-list-item v-for="(item,index) in messageList" :key="index">
					<view class="item">
						<u-row>
							<u-col span="2">
								<u-icon
									:name="item.title=='活动消息'?'file-text-fill':item.title=='系统消息'?'bell-fill':'grid-fill'"
									size="34" color="#e5ca8e"></u-icon>
							</u-col>
							<u-col span="5">
								<u--text :text="item.title" align="left" size="18" bold lineHeight="40" color="#000"
									customStyle="margin-left:20rpx;"></u--text>
							</u-col>
						</u-row>
						<u--text :text="item.content" align="left" size="16" lineHeight="30" color="#333"
							customStyle="margin-left:20rpx;text-align:left;"></u--text>
						<u-row>
							<u-col span="6">

							</u-col>
							<u-col span="6">
								<u--text :text="item.createTime" align="right" size="12" color="#000"></u--text>
							</u-col>
						</u-row>
					</view>
				</u-list-item>
			</u-list>
			<u-empty v-else mode="message" icon="message"></u-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import router from '@/api/router';
	import {
		messages
	} from "@/api/pages/events.js"
	const messageList = ref([])
	const statusList = ref([
		"bell-fill",
		"grid-fill",
		"file-text-fill"
	])
	onMounted(() => {
		getMessages()
	})
	const getMessages = async () => {
		const res = await messages()
		messageList.value = res.result
		console.log("res---", res);
	}
</script>

<style lang="scss" scoped>
	.conent_box {
		margin-top: 0;
		background: #fff;

		.item {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 40rpx;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
		}
	}
</style>